<script setup lang="ts">
import { computed,onMounted,ref } from 'vue';
import PostUnit from '../../components/post/PostUnit.vue';
import { getPostListApi } from '@/api/path/post'
import { useRoute } from 'vue-router';
import { emitChangeFn } from 'element-plus';

const count = ref(10)
const loading = ref(false)
const noMore = computed(() => count.value >= 20)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
  loading.value = true
  setTimeout(() => {
    count.value += 2
    loading.value = false
  }, 2000)
}

const props = defineProps({
  posts: Object,
  isHadPosts: Boolean
});

const emit = defineEmits([
  'updateList'
])
const handleUpdateList = (shouldUpdate: Boolean) => {
  if (shouldUpdate) {
    console.log("该更新啦！")
    emit('updateList', true);
  }
}
</script>

<template>
    <!-- 动态列表 -->
    <div class="infinite-list-wrapper" style="overflow: auto" v-if="isHadPosts">
        <ul
        v-infinite-scroll="load"
        class="posts-list"
        :infinite-scroll-disabled="disabled"
        >
        <div class="post-div" v-for="post in props.posts">
          <PostUnit class="post-scrollbar-item"
                v-if="!post.isDelete"
                :key="post.postId"
                :post="post"
                :showcommentbox="false"
                @update-list="handleUpdateList"
            />
          </div>
        </ul>
        
    </div>
    <!-- 动态列表空状态 -->
    <div class="empty" style="overflow: auto" v-else>
        <div class="empty-state-content">
          <el-empty description="暂无动态，等你发布"></el-empty>
        </div>
      </div>

    
</template>

  
<style scoped>
ul {
  padding-inline-start: 0px;
}
.posts-list {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.empty {
  background-color: var(--color-light);
}
.post-scrollbar-item {
  flex: 1; /* 让子元素占据剩余空间 */
  min-width: 0; /* 允许元素缩小以适应内容 */
  width: 100%; /* 占满父容器宽度 */
}
.infinite-list-wrapper {
  background-color: var(--color-light);
  overflow: hidden;
  text-align: center;
}
.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}
.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
  overflow: hidden;
}
.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
  overflow: hidden;
}
</style>
  